import React from 'react';
import { Divider, Button, Tag, Checkbox } from 'antd';
import './list.css';

const List = ({ list, onChange, onDelete }) => {
  return (
    <div style={{ width: '50%', border: '1px solid #ccc', boxSizing: 'border-box', borderRadius: 5, padding: 10 }}>
      {list.map((item, i) => (
        <div key={item.id} className="list-box">
          <div style={{ display: "flex", justifyContent: "space-between", height: "20px", lineHeight: "40px" }}>
            <div>
              <span style={{ paddingRight: 5 }}>{i + 1}</span>
              <Checkbox
                disabled={item.type}
                checked={item.type}
                onChange={e => onChange(e.target.checked, item.id)}
              >
                {item.name}
              </Checkbox>
              <Tag color={item.type ? 'red' : 'green'}>
                {item.type ? '已完成' : '未完成'}
              </Tag>
            </div>
            <div className="list-btn">
              <Button type="primary" danger onClick={() => onDelete(item.id)}>
                删除
              </Button>
            </div>
          </div>
          <Divider />
        </div>
      ))}
    </div>
  );
};

export default List;
